<template>
    <div class="app-container">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row :gutter="15">
                <el-col :span="24" v-if="type==2">
                    <el-form-item label="还车类型" prop="category">
                        <!-- <el-input v-model="form.category" placeholder="请输入车辆油量" style="width:220px;margin-right:15px"></el-input> -->
                        <el-radio-group v-model="form.category">
                            <!-- <div style="display:flex"> -->
                            <el-radio label="1">租赁到期</el-radio>
                            <el-radio label="2">违约退车</el-radio>
                            <!-- </div> -->
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车辆油量" prop="fuelCapacity">
                      <el-slider v-model="form.fuelCapacity" style="width: 72%;display: inline-block;margin: 0 20px" :max="16"  show-stops></el-slider>
                      <div style="display: inline-block;overflow: hidden">{{form.fuelCapacity}}/16</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车辆公里数" prop="vehicleMileage">
                        <el-input v-model="form.vehicleMileage" placeholder="请输入车辆公里数" style="width:220px;margin-right:15px"></el-input>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="24" v-if="form.type==2">
                    <el-form-item label="补充油费" prop="lkosten">
                        <el-input v-model="form.lkosten" placeholder="请输入补充油费" style="width:220px;margin-right:15px"></el-input>
                    </el-form-item>
                </el-col> -->
                <el-col :span="24">
                    <el-form-item label="车辆随车物品" prop="accessoryItems">
                        <el-checkbox-group v-model="form.accessoryItems">
                            <template v-for="item in dict.type.car_accessories">
                                <el-checkbox :key="item.id" :label="item.label" :value="item.value"></el-checkbox>
                            </template>
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="验车时间" prop="takeAlsoTime">
                        <el-date-picker v-model="form.takeAlsoTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" style="width:220px;margin-right:15px"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="其他描述" prop="remark">
                        <el-input v-model="form.remark" type="textarea" placeholder="请输入其他描述"></el-input>
                    </el-form-item>
                </el-col>
                <template v-if="type==2">
                    <el-col :span="24">
                        <el-table :data="alsoCarItems">
                            <el-table-column label="收费项名称" prop="chargeItemsName"></el-table-column>
                            <el-table-column label="收费类型" align="center">
                                <template slot-scope="scope">
                                    <!-- {{ {1:'按次', 2:'按天', 3:'按里程'}[Number(row.chargeItemsType)] }} -->
                                    <dict-tag :options="dict.type.charge_type" :value="scope.row.chargeItemsType" />
                                </template>
                            </el-table-column>
                            <!-- <el-table-column label="收费绑定项">
                                <template slot-scope="{row}">
                                    {{ {1:'新增订单', 2:'还车验车'}[Number(row.bindingCharges)] }}
                                </template>
                            </el-table-column> -->
                            <el-table-column label="扣款金额">
                                <template slot-scope="{row}">
                                    <el-input v-model="row.deductionsAmount" placeholder="请输入金额"></el-input>
                                </template>
                            </el-table-column>
                            <!-- <el-table-column label="扣款方式" width="220px">
                                <template slot-scope="{row}">
                                    <el-radio-group v-model="row.deductionsWay">
                                        <div style="display:flex">
                                            <el-radio label="1">押金抵扣</el-radio>
                                            <el-radio label="2">线下补缴</el-radio>
                                        </div>
                                    </el-radio-group>
                                </template>
                            </el-table-column> -->
                            <el-table-column label="操作" align="center">
                                <template slot-scope="{row}" v-if="row.isOptional==1">
                                    <el-switch v-model="row.checked" active-text="选择" inactive-text="不选择"></el-switch>
                                </template>
                            </el-table-column>
                        </el-table>
                        <br>
                    </el-col>
                </template>

                <el-col :span="24">
                    <el-form-item label="车身照片" prop="bodyImage">
                        <ImageUpload isArray v-model="form.bodyImage" :limit="4"></ImageUpload>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="仪表盘/油表" prop="panelImage">
                        <ImageUpload isArray v-model="form.panelImage" :limit="2"></ImageUpload>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="内饰照片" prop="interiorImage">
                        <ImageUpload isArray v-model="form.interiorImage" :limit="2"></ImageUpload>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="车辆划痕" prop="scratchImage">
                        <ImageUpload isArray v-model="form.scratchImage" :limit="6"></ImageUpload>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="type==2">
                    <el-form-item label="客户签名" prop="signImage">
                        <ImageUpload isArray v-model="form.signImage" :limit="1"></ImageUpload>
                    </el-form-item>
                </el-col>
                <template v-if="!isEmitter">
                    <el-col :span="24">
                        <el-form-item>
                            <el-button @click="$emit('close')">取消</el-button>
                            <el-button v-if="type==1" :loading="btnloadIng" type="primary" @click="submit(1)" v-hasPermi="['order:orderBasic:delivery']">保存</el-button>
                            <el-button v-if="type==2" :loading="btnloadIng" type="primary" @click="submit(2)" v-hasPermi="['order:orderBasic:alsoCarTest']">保存</el-button>
                        </el-form-item>
                    </el-col>
                </template>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import ImageUpload from '@/components/ImageUpload/index.vue';
import * as orderApi from '@/api/longOrder/index';

export default {
    components: {
        ImageUpload,
    },
    dicts: ['delivery_type', 'car_accessories', 'charge_type'],
    props: ['orderNo', 'type', 'isEmitter'],
    data() {
        return {
            btnloadIng: false,
            form: {
                // orderNo: '',//订单编号   必传
                // type: 1,//类型(1交车验车,2还车验车)   必传
                category: '1', // 1租赁到期 2违约退车
                fuelCapacity: '',//车辆油量
                vehicleMileage: '',//公里数
                accessoryItems: [],//车辆随车物品(逗号隔开)
                remark: '',//其他描述
                takeAlsoTime: null,//取还车时间
                lkosten: 0.0,//补充油费(还车验车)
                bodyImage: [], //车身照片
                panelImage: [],//仪表盘
                interiorImage: [], //内饰照片
                scratchImage: [],//车辆划痕
                signImage: []//客户签名
            },
            rules: {
                fuelCapacity: [{
                    required: true,
                    message: '车辆油量不能为空',
                    trigger: 'change'
                }, {
                    pattern: /^[0-9]+(.[0-9]{1,2})?$/,
                    message: '车辆油量数输入不正确',
                    trigger: 'blur',
                }],
                vehicleMileage: [{
                    required: true,
                    message: '公里数不能为空',
                    trigger: 'change'
                }, {
                    pattern: /^[0-9]+(.[0-9]{1,2})?$/,
                    message: '公里数输入不正确',
                    trigger: 'blur',
                }],
                takeAlsoTime: [{
                    required: true,
                    message: '取还车时间不能为空',
                    trigger: 'change'
                }]
            },
            alsoCarItems: [], // 收费项列表
        };
    },
    computed: {
        formData() {
            const formData = {
                orderNo: this.orderNo,//订单编号   必传
                type: this.type,//类型(1交车验车,2还车验车)   必传
                fuelCapacity: this.form.fuelCapacity,//车辆油量
                vehicleMileage: this.form.vehicleMileage,//公里数
                accessoryItems: String(this.form.accessoryItems),//车辆随车物品(逗号隔开)
                remark: this.form.remark,//其他描述
                takeAlsoTime: this.form.takeAlsoTime,//取还车时间
                lkosten: this.form.lkosten,//补充油费(还车验车)
                bodyImage: this.form.bodyImage, //车身照片
                panelImage: this.form.panelImage,//仪表盘
                interiorImage: this.form.interiorImage, //内饰照片
                scratchImage: this.form.scratchImage,//车辆划痕
                signImage: this.form.signImage,//客户签名
            };
            if (this.type == 2) {
                formData.cost = this.alsoCarItems.filter(val => val.checked || val.isOptional == 2).map(val => {
                    return {
                        deductionsFor: val.deductionsFor,
                        deductionsAmount: val.deductionsAmount,
                        deductionsWay: val.deductionsWay,
                    };
                });
                formData.category = this.form.category;
            }
            return formData;
        },
    },
    mounted() {
        if (this.type == 2) {
            this.getalsoCarItems();
        }
    },
    methods: {
        getalsoCarItems() {
            orderApi.alsoCarItems().then(response => {
                const data = response.data.filter(val => val.isAvailable == 1);
                this.alsoCarItems = data.map(val => {
                    return {
                        ...val,
                        checked: false,
                        deductionsFor: val.chargeItemsName,
                        deductionsAmount: 0,
                        deductionsWay: '2',
                    }
                })
            });
        },
        emitData() {
            return new Promise((resolve) => {
                if (this.formData.cost) {
                    for (const iterator of this.formData.cost) {
                        if (!/^([0-9]+).?([0-9]+)?$/.test(iterator.deductionsAmount)) {
                            this.$message.error('扣款金额填写错误!!');
                            return;
                        }
                    }
                }
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        this.btnloadIng = true;
                        resolve(this.formData);
                        setTimeout(() => {
                            this.btnloadIng = false;
                        }, 2e3);
                    } else {
                        this.$message.error('表单验证未通过，请检查表单内容！')
                    }
                })
            })
        },
        submit() {
            this.emitData().then(res => {
                orderApi.delivery(this.formData).then(response => {
                    this.btnloadIng = false;
                    if (response.code == 200) {
                        this.$message.success(response.msg);
                        this.$emit('close');
                    } else {
                        this.$message.error(response.msg);
                    }
                });
            })
            // if (this.formData.cost) {
            //     for (const iterator of this.formData.cost) {
            //         if (!Number(iterator.deductionsAmount)) {
            //             this.$message.error('扣款金额填写错误!');
            //             return;
            //         }
            //     }
            // }
            // this.$refs["form"].validate(valid => {
            //     if (valid) {
            //         this.btnloadIng = true;
            //         orderApi.delivery(this.formData).then(response => {
            //             this.btnloadIng = false;
            //             if (response.code == 200) {
            //                 this.$message.success(response.msg);
            //                 this.$emit('close');
            //             } else {
            //                 this.$message.error(response.msg);
            //             }
            //         }).catch(err => {
            //             this.btnloadIng = false;
            //         });
            //     }
            // })

        },
    },
}
</script>
